<template>
<div v-infinite-scroll="moreList" infinite-scroll-disabled="loading" infinite-scroll-immediate-check="true" infinite-scroll-distance="100">
  <div class="comment_all" @click="hide">
    <div v-if="replyStyle==0" class="whiteBg">
      <div class="aboutComments">
        关于电子券的评论 ({{replyNum.couponComNum || 0}})
      </div>
      <div class="coupon_dtl_tag">
        <p :class="indexCom==3?'tag_all':'tag_good'" @click="tabCom(3)">全部({{replyNum.couponComNum||0}})</p>
        <p :class="indexCom==0?'tag_all':'tag_good'" @click="tabCom(0)">满意({{replyNum.couponComStar45Num||0}})</p>
        <p :class="indexCom==1?'tag_all':'tag_good'" @click="tabCom(1)">一般({{replyNum.couponComStar3Num||0}})</p>
        <p :class="indexCom==2?'tag_all':'tag_bad'" @click="tabCom(2)">不满意({{replyNum.couponComStar12Num||0}})</p>
      </div>
    </div>
    <div v-if="replyStyle==1" class="whiteBg">
      <div class="aboutComments">
        关于商家的评论 ({{replyShopNum.mchtComNum||0}})
      </div>
      <div class="coupon_dtl_tag">
        <p :class="indexCom==3?'tag_all':'tag_good'" @click="tabCom(3)">全部({{replyShopNum.mchtComNum||0}})</p>
        <p :class="indexCom==0?'tag_all':'tag_good'" @click="tabCom(0)">满意({{replyShopNum.mchtComStar45Num||0}})</p>
        <p :class="indexCom==2?'tag_all':'tag_bad'" @click="tabCom(2)">不满意({{replyShopNum.mchtComStar12Num||0}})</p>
        <p :class="indexCom==1?'tag_all':'tag_good'" @click="tabCom(1)">一般({{replyShopNum.mchtComStar3Num||0}})</p>
        <p :class="indexCom==4?'tag_all':'tag_good'" @click="tabCom(4)">有图({{replyShopNum.mchtPicNum||0}})</p>
      </div>
    </div>
  </div>


  <comments v-if="replyStyle==0" @clickPub="publishFocus" @clickBlur="hide" :commentList="couponComments" :replyStyle="replyStyle" :mchtId="mchtId" :allStatus="allStatus"></comments>
  <comments v-if="replyStyle==1" @clickPub="publishFocus" @clickBlur="hide" :commentList="shopComments" :replyStyle="replyStyle" :mchtId="mchtId" :allStatus="allStatus"></comments>
  <!-- 评论框 -->
  <div class="comment_box" v-show="boxStatus">
    <input ref="inputId" v-model="commentCont" @focus="inputFixed" class="left" type="text" placeholder="写点评论吧" />
    <span @click="publish()" class="comment_box_btn right">发表</span>
  </div>
  <go-top v-show="goTopState" ref="goTopId"></go-top>
  <!-- <div class="loading-box" v-if="moreInfo">
    <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreCoupon"></list-loading>
  </div> -->
  <div class="lastInfoMore" v-if="!moreInfo&&(shopComments.length>2||couponComments.length>2)">没有更多</div>
</div>
</template>
<script>
import comments from '../../componentes/global/comments.vue'
import getData from '../../service/getData.js'
import getData2 from '../../service/getData2.js'
import * as types from '../../vuex/types.js'
import listLoading from '../../componentes/global/listLoading.vue'
import {
  mapState
} from 'vuex'
import {
  Toast
} from 'mint-ui'
export default {
  data() {
    return {
      replyStyle: 0,
      replyNum: '',
      replyShopNum: '',
      loading: true,
      noMoreCoupon: true,
      indexCom: 3,
      commId: '',
      commentUsrd: '',
      commentCont: '',
      boxStatus: false,
      mchtId: '',
      picture: '',
      allStatus: true,
      goTopState: false,
      moreInfo: true
    }
  },
  components: {
    comments,
    listLoading
  },
  methods: {
    couponCommentsList: function() {
      var me = this;
      this.$store.dispatch("couponComments", {
        couponId: this.$route.params.couponId,
        data: {
          "commStar": me.indexCom,
          "hasPic": "",
          "mchtId": this.$route.params.mchtId,
        }
      }).then(function(rep) {

        if (rep.content.commList) {
          if (rep.content.commList.length < me.couponCommentsLimit) {

            setTimeout(function() {
              me.noMoreCoupon = true;
            }, 300);
            me.moreInfo = false;
          }
          if (rep.content.commList.length == me.couponCommentsLimit) { //如果列表数据够10条，开启下拉加载
            me.moreInfo = true;
            me.loading = false;
            me.noMoreCoupon = false;
          }
        } else {
          setTimeout(function() {
            me.noMoreCoupon = true;
          }, 300);
        }
        console.log(rep);
        me.replyNum = rep.content;

      }).catch(function(rep) {
        setTimeout(function() {
          me.noMoreCoupon = true;
        }, 300);
      });
    },
    shopCommentsList: function() {
      var me = this;
      this.$store.dispatch("shopComments", {
        mchtId: me.$route.params.mchtId,
        data: {
          "commStar": me.indexCom,
          "hasPic": me.picture,
          "mchtId": this.$route.params.mchtId,
        }
      }).then(function(rep) {
        console.log(rep);
        // console.log(rep.content);
        if (rep.content.commList) {
          if (rep.content.commList.length < me.couponCommentsLimit) {

            setTimeout(function() {
              me.noMoreCoupon = true;
            }, 300);
            me.moreInfo = false
          }
          if (rep.content.commList.length == me.couponCommentsLimit) { //如果列表数据够10条，开启下拉加载
            me.loading = false;
            me.noMoreCoupon = false;
          }
        } else {
          setTimeout(function() {
            me.noMoreCoupon = true;
          }, 300);
        }
        me.replyShopNum = rep.content;
      }).catch(function(rep) {
        setTimeout(function() {
          me.noMoreCoupon = true;
        }, 300);
      });
    },
    clickMoreList: function() {
      // console.log('adsf')
      if (!this.noMoreCoupon) { //防止重复点击
        return
      }
      var me = this;
      // console.log('qwe')
      this.noMoreCoupon = false;
      if (this.$route.params.replyStyle == 1) {
        me.shopCommentsList();
      } else if (this.$route.params.replyStyle == 0) {
        me.couponCommentsList();
      }
    },
    moreList: function() {
      this.loading = true;
      this.noMoreCoupon = true;
      this.clickMoreList();

    },
    // 评论满意度切换
    tabCom(num) {
      this.$store.commit(types.SHOP_COMMENTS); //初始化列表
      this.$store.commit(types.COUPON_COMMENTS); //初始化列表
      this.$store.commit("COUPON_PAGES"); //评论分页初始化
      this.indexCom = num;
      if (num == 4) {
        this.picture = 3;
      } else {
        this.picture = '';
      }
      if (this.replyStyle == 0) {
        this.couponCommentsList();
      } else if (this.replyStyle == 1) {
        this.shopCommentsList();
      };

    },
    // 点评论聚焦
    publishFocus(data) {
      this.commId = data.commId;
      this.commentUsrd = data.usrId;
      this.boxStatus = true;
      this.$refs.inputId.focus();

    },
    // 点评论失焦
    hide: function() {
      this.boxStatus = false;
    },
    // input聚焦
    inputFixed: function() {
      let me = this;
      let inputEl = me.$refs.inputId;
      setTimeout(function() {
        inputEl.scrollIntoView(true);
      }, 100)
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        setTimeout(function() {
          // console.log(document.body.scrollHeight)
          window.scrollTo(0, document.body.scrollHeight);
        }, 500)
      }
    },
    //发表
    publish: function(e) {
      console.log(this.commId + '/' + new Date().format("YMMddhhmmss") + '/' + this.commentCont);
      var me = this;
      if (me.commentCont == '') {
        Toast({
          message: '内容不能为空',
          duration: 800
        });
        return false;
      }
      if (me.commentUsrd == me.userInfo.usrId) {
        Toast({
          message: '不能回复自己',
          duration: 800
        });
        return;
      }
      getData2.commentReply({
        'method': 'post',
        data: {
          commId: me.commId,
          dsc: me.commentCont
        }
      }, me.userInfo.usrId).then(rep => {
        if (rep.respCode == '00') {
          // console.log('发表成功');
          Toast({
            message: '回复成功',
            duration: 800
          });
          me.commentCont = ''
          me.boxStatus = false;
          if (me.replyStyle == 0) {
            me.$store.commit("COUPON_PAGES");
            me.couponCommentsList();
          } else if (me.replyStyle == 1) {
            me.$store.commit("COUPON_PAGES");
            me.shopCommentsList();
          };
        } else {
          Toast({
            message: '回复失败',
            duration: 800
          });
          me.boxStatus = false;
        }
      })
    },
    //监听滚动事件
    handleScroll() {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var scrollHeight = document.documentElement.clientHeight || document.body.scrollTop;
      console.log(scrollHeight)
      if (scrollTop >= scrollHeight + 50) {
        this.goTopState = true
      } else {
        this.goTopState = false
      }
      //回到顶部过程中用户滚动滚动条，停止定时器
      if (scrollTop <= 0) {
        if (this.$refs.goTopId) {
          this.$refs.goTopId.clear();
        }
      };

    },

  },
  beforeRouteLeave(to, from, next) {
    // 避免返回时未清除定时器
    if (this.$refs.goTopId) {
      this.$refs.goTopId.clear();
    }
    window.removeEventListener('scroll', this.handleScroll);

    next()
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      couponInfo: state => state.coupon.couponInfo,
      couponComments: state => state.coupon.couponComments,
      couponCommentsPage: state => state.coupon.couponCommentsPage,
      couponCommentsLimit: state => state.coupon.couponCommentsLimit,
      shopComments: state => state.coupon.shopComments,
      shopCommentsPage: state => state.coupon.shopCommentsPage,
      shopCommentsLimit: state => state.coupon.shopCommentsLimit,
    })
  },
  created: function() {
    // 监视滚动
    window.addEventListener('scroll', this.handleScroll);
    this.replyStyle = this.$route.params.replyStyle;
    this.mchtId = this.$route.params.mchtId;
		this.tabCom(this.$route.query.replyType)
    // this.$store.commit(types.SHOP_COMMENTS); //初始化列表
    // this.$store.commit(types.COUPON_COMMENTS); //初始化列表
    // this.$store.commit("COUPON_PAGES"); //评论分页初始化
    // this.$store.commit(types.GET_SCORLL_STATUS, true);
    // this.clickMoreList()
  }
}
</script>
<style>

</style>
